<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/style/admin.css">
    <link rel="stylesheet" href="/static/admin/css/login.css">
    <link href="/static/admin/css/jquery.slider.css" rel="stylesheet">
    <script src="/static/admin/layui/layui.js" charset="utf-8"></script>
</head>
<style>
    .layui-form-checkbox[lay-skin=primary] span {
        color: white !important;
    }
</style>
<body>
<div class="login_body">
    <div class="login_content">
        <div class="login_log">
            <img src="/static/admin/images/login_log.png" class="layui-hide-xs layui-show-sm-block layui-show-md-block layui-show-lg-block">
            <img src="/static/admin/images/login_log_mobile.png" class="layui-hide-lg layui-hide-md  layui-hide-sm layui-show-xs-block">
        </div>
        <div class="login_form">
            <div class="login-left layui-hide-xs ">
                <img src="/static/admin/images/login_left.png">
            </div>
            <div class="login_hx layui-hide-xs ">
                <img src="/static/admin/images/login_hx.png">
            </div>
            <div class="login_right">
                <form class="layui-form" id="doLogin" name="doLogin" method="post" action='{:url("admin/login/index")}'>
                    <input type="hidden" name="__token__" value="{:token()}"/>
                    <div class="layui-row">
                        <input type="text" name="username" id="LAY-user-login-username" lay-verify="required"
                               placeholder="用户名或昵称"
                               class="layui-input">
                    </div>

                    <div class="layui-row">
                        <input type="password" name="password" id="LAY-user-login-password" lay-verify="required"
                               placeholder="密码" class="layui-input">
                    </div>

                    {if condition="$verify_type eq 1"}
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
                                   placeholder="图形验证码" class="layui-input login_yzm">
                        </div>
                        <div class="layui-col-xs5">
                            <img src="{:captcha_src()}" class="layadmin-user-login-codeimg"
                                 style="float:right;cursor: pointer; width: 160px !important;" alt="captcha"
                                 id="LAY-user-get-vercode"
                                 onclick="javascript:this.src='{:captcha_src()}?tm='+Math.random();">
                        </div>
                    </div>
                    {else}
                    <div class="layui-row">
                        <div id="slider" class="slider"></div>
                    </div>
                    {/if}
                    <div class="layui-row" style="float: left; ">
                        <input type="checkbox" name="keeplogin" lay-skin="primary" id="keeplogin"
                               value="1"
                               title="保持会话"/>
                    </div>
                    <div class="layui-row">
                        <button class="layui-btn layui-btn-fluid login_submit" id="login" lay-submit=""
                                lay-filter="LAY-user-login-submit">
                            登 入
                        </button>
                    </div>
                </form>
            </div>
            <div class="login-footer">
                <p>©2020 技术支持：合肥安玛尔市场信息咨询有限公司</p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/admin/video/jquery.js"></script>
<script src="/static/admin/js/jquery.form.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.slider.min.js"></script>
<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'index', 'jquery'], function () {
        var $ = layui.$
            , form = layui.form;
        //滑块验证
        var check_result = false;
        $("#slider").slider({
            width: 273, // width
            height: 35, // height
            sliderBg: "rgb(232, 232, 232)", // 滑块背景颜色
            color: "rgb(114, 114, 114)", // 文字颜色
            fontSize: 14, // 文字大小
            bgColor: "#329ce2", // 背景颜色
            textMsg: "按住滑块，拖拽验证", // 提示文字
            successMsg: "验证成功", // 验证成功提示文字
            successColor: "#ffffff", // 滑块验证成功提示文字颜色
            time: 400, // 返回时间
            callback: function (result) { // 回调函数，true(成功),false(失败)
                check_result = result;
            }
        });
        form.render();
        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                $("#login").click();
            }
        });
        $("#login").click(function () {
            $(function () {
                $('#doLogin').ajaxForm({
                    beforeSubmit: checkForm, // 此方法主要是提交前执行的方法，根据需要设置
                    success: complete, // 这是提交后的方法
                    dataType: 'json'
                });

                function checkForm() {
                    if ('' == $.trim($('#LAY-user-login-username').val())) {
                        layer.msg("请输入登录用户名", {icon: 2, time: 2000}, function (index) {
                            layer.close(index);

                        });

                        return false;
                    }

                    if ('' == $.trim($('#LAY-user-login-password').val())) {
                        layer.msg("请输入登录密码", {icon: 2, time: 2000}, function (index) {
                            layer.close(index);
                        });
                        return false;
                    }
                    if ({$verify_type} == 0) {
                        if (false == check_result) {
                            layer.msg('请拖动滑块到最右边', {icon: 2});
                            return false;
                        }
                    } else {
                        if ('' == $.trim($('#LAY-user-login-vercode').val())) {
                            layer.msg("请输入验证码", {icon: 2, time: 2000}, function (index) {
                                layer.close(index);
                            });
                            return false;
                        }
                    }
                    $('button').addClass('disabled').text('登录中...');
                }

                function complete(res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 1, time: 2000}, function (index) {
                            layer.close(index);
                            window.location.href = res.url;
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 2000}, function (index) {
                            layer.close(index);
                        });
                        $('button').removeClass('disabled').text('登　录');
                        return false;
                    }
                }
            });
        });


    });

</script>
</body>
</html>